
<template>
	<view class="searchbody">
		<view class="mask" @click='close()'></view>
		<view class="search-body" v-if="!showType">
			<view>
				<view class="search">
					<image src="/static/map/search-icon.png" mode=""></image>
					<!-- <input type="text" placeholder="搜索美食"> -->
					<view class="search-input" @click="toSearch">搜索美食</view>
				</view>
				<view class="head-btn" @click="showScreen()">菜系筛选</view>
				<view class="head-btn">离我最近</view>
			</view>
			
			<view class="search-list">
				<view class="search-item" v-for="(item,index) in searchData" :key='index'>
					<image :src="item.img" mode=""></image>
					<view class="item-text">
						<text class="item-title">{{item.name}}</text>
						<text class="item-des">{{item.des}}</text>
					</view>
					<view class="enter" @click="toDetail">详情</view>
				</view>
			</view>
		</view>
		<view class="screen" v-if="showType">
			<view class="head">
				<text>菜系筛选</text>
				<view class="close" @click="showScreen">
					<image src="/static/close.png" mode=""></image>
				</view>
			</view>
			<view class="screen-list">
				<view class="screen-item" v-for="(item,index) in screenData" :key='index' @click="chooseType(item.id)">
					<text>{{item.type}}</text>
					<image v-if="typeId==item.id" src="/static/duihao.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				typeId:0,
				showType:false,
				searchData:[
					{
						img:'/static/banner.png',
						name:'据您328m',
						des:'张亮麻辣烫，在清新大道中轴线北端...'
					},
					{
						img:'/static/banner.png',
						name:'麻辣萝莉',
						des:'据您328m'
					},
					{
						img:'/static/banner.png',
						name:'游客快餐中心',
						des:'据您328m'
					},
					{
						img:'/static/banner.png',
						name:'沸腾鱼乡',
						des:'据您328m'
					}
				],
				screenData:[
					{
						type:'不限',
						id:0,
					},
					{
						type:'地方菜',
						id:1,
					},
					{
						type:'快餐简餐',
						id:2,
					},
					{
						type:'小吃',
						id:3,
					},
					{
						type:'面包甜点',
						id:4,
					},
					{
						type:'烧烤',
						id:5,
					}
				],
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url:'/pages/home/food/foodDetail'
				})
			},
			choose(index){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.spotClick();
				// this.$parent.foodIndex=index;
				// this.$parent.tapF(index)
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.spotClick();
				// this.$parent.$parent.foodIndex=index;
				// this.$parent.$parent.tapF(index)
				//#endif
			},
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeSpotSearchF();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeSpotSearchF();
				//#endif
				
			},
			chooseType(id){
				this.typeId = id
				this.showScreen()
			},
			showScreen(){
				this.showType = !this.showType
			},
			toSearch(){
				uni.navigateTo({
					url:'/pages/home/scenicSpot/map/shenqiSearch'
				})
			}
		},
	}
</script>

<style scoped>
	.searchbody{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
	}
	.mask{
		width: 750upx;
		height: calc(100vh - 250upx);
		
		position: absolute;
		/* top: 140upx; */
	}
	.search-body{
		width: 750upx;
		height: 535upx;
		position: fixed;
		background: #FFFFFF;
		border-radius: 30upx 30upx 0 0;
		bottom: 110upx;
	}
	.head-btn{
		width: 157upx;
		height: 56upx;
		border-radius: 30upx;
		float: left;
		color: #FFFFFF;
		text-align: center;
		line-height: 56upx;
		font-size: 24upx;
		margin-left: 14upx;
		margin-top: 30upx;
		background: -webkit-linear-gradient(left, #54B1FF,#93CAFB);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#93CAFB);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#93CAFB);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#93CAFB);
		/* 标准的语法 */
	}
	.search{
		width: 364upx;
		height: 60upx;
		margin-left: 25upx;
		
		margin-top: 27upx;
		float: left;
		border-radius: 20upx;
		border: #e4e4e4 solid 1px;
	}
	.search image{
		width: 28upx;
		height: 28upx;
		margin-left: 35upx;
		margin-top: 16upx;
		float: left;
	}
	.search-input{
		width: 250upx;
		height: 60upx;
		margin-left: 20upx;
		font-size: 28upx;
		float: left;
		line-height: 60upx;
	}
	.search-list{
		width: 750upx;
		height: 400upx;
		margin-top: 20upx;
		overflow: scroll;
	}
	.search-item{
		width: 750upx;
		height: 75upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}
	.search-item image{
		width: 95upx;
		height: 75upx;
		border-radius: 10upx;
		margin-left: 42upx;
		float: left;
	}
	.item-text{
		float: left;
		width: 450upx;
		height: 75upx;
		margin-left: 30upx;
	}
	.item-title{
		width: 450upx;
		display: block;
		font-size: 28upx;
	}
	.item-des{
		width: 450upx;
		display: block;
		font-size: 24upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.enter{
		width: 100upx;
		height: 40upx;
		border: #A8D7FF solid 1upx;
		border-radius: 20upx;
		font-size: 24upx;
		text-align: center;
		line-height: 40upx;
		float: right;
		color: #577AFF;
		margin-top: 20upx;
		margin-right: 23upx;
	}
	.screen{
		width: 750upx;
		height: 535upx;
		position: fixed;
		background: #FFFFFF;
		border-radius: 30upx 30upx 0 0;
		bottom: 110upx;
	}
	.head{
		width: 100%;
		height: 87upx;
		position: relative;
		border-bottom: #DCDCDC solid 1upx;
	}
	.head text{
		width: 100%;
		display: block;
		height: 87upx;
		line-height: 87upx;
		font-size: 30upx;
		text-align: center;
		position: absolute;
		z-index: 0;
	}
	.close{
		width: 87upx;
		height: 87upx;
		right: 0;
		z-index: 1;
		position: absolute;
	}
	.close image{
		width: 27upx;
		margin: 30upx;
		height: 27upx;
	}
	.screen-list{
		width: 100%;
		height: 440upx;
		overflow: scroll;
	}
	.screen-item{
		width: 100%;
		height: 100upx;
		
	}
	.screen-item text{
		line-height: 100upx;
		float: left;
		font-size: 30upx;
		margin-left: 56upx;
	}
	.screen-item image{
		width: 30upx;
		height: 30upx;
		margin-top: 30upx;
		float: right;
		margin-right: 56upx;
	}
</style>
